css3 动画（三）animation 简介

前言

上一篇中，总结了一下 transition 以及 cubic-bezier()。本篇中，将介绍 css3 动画中的更为灵活的动画属性：animation。

animation

css3 中的 animation 属性是一系列配置的简写形式，其子属性有：

• animation-delay：动画开始时的延迟时间。默认 0s，无延时
• animation-direction：动画是否反向播放。默认 normal，表示动画结束之后，回到起点状态
• animation-duration：动画时长。默认 0s，无动画
• animation-iteration-count：动画重复次数。默认 1，只执行一次动画
• animation-name：动画名称，该名称为动画关键帧的名称。默认 none
• animation-play-state：动画状态，即是处于播放还是暂停状态。默认 running，为播放状态
• animation-timing-function：动画速度。默认 ease
• animation-fill-mode：指定在动画执行之前和之后如何给动画的目标应用样式。默认 none 如何理解？

animation-name

animation-name 表示的是关键帧的名称，那么如何定义关键帧呢？使用 @keyframes。

@keyframes

@keyframes 是定义 css3 animation 动画的关键所在。通过定义每一帧的样式状态，比 transition 能更好地控制中间过程。假如说 transition 只能定义 “两帧” 的状态，则 animation 可以定义 “n帧（n >= 2）” 的状态。

语法

“@keyframes + 名称 { // 关键帧样式... }”

@keyframes move {
  from { width: 100px; }
  to { width: 200px; }
}
/* 或 */
@keyframes move {
  0% { width: 100px; }
  100% { width: 200px; }
}

总结

其实 animation 也并不复杂，其有 8 个子属性。

下一篇：css3 动画（三）animation.css 源码解析（通过阅读 animation.css 动画库的源码，来提高对 css3 中 animation 属性的认识）